import * as React from "../../../script/frame/apiModel/gui/React";
import {IProps, SyncId, UISyncData, View} from "../../../script/frame/apiModel/gui/React";
import {DataRouter} from "../../../script/frame/dataSource/DataRouter";
import Configer from "../../../script/frame/apiModel/config/Configer";
import {SelectItemMap, UIConfigKey} from "../../../script/constant/UIConfig";
import {GuiId, GuiKeys} from "../../../script/controller/model/ControllerOpt";
import PageContent, {PageContentType} from "../component/PageContent";
import {PlayerModel} from "../../../script/frame/apiModel/adapterModel/model4/PlayerModel";
import {PlayerFactory} from "../../../script/frame/PlayerFactory";
import {IntegralMallBarInterface} from "../../interface/GuiInterface";
import {ResourceKey} from "../../../script/constant/ResourceConstant";
import {publicGui} from "../../interface/PublicGui";

interface IProp {
    pageContentType: PageContentType;
    getAchFun: (player: PlayerModel) => { [key: string]: number };
    getIntegralFun: (player: PlayerModel) => number;
}
interface IState {
    achs: {[p: string]: number};
    title: string;
    subTitle: string;
    des: string;
    integral: number;
    x: number;
    y: number;
    infoVisible: boolean,
}


export default class IntegralShopBar extends IntegralMallBarInterface<IProp, IState> {
    constructor(props: IProps & IProp) {
        super(props);
        this.state = {
            visible: false,
            title: '',
            subTitle: '',
            des: '',
            integral: 0,
            x: 0,
            y: 0,
            infoVisible: false,
            achs: {},
        }
    }

    render = () => {
        const integralMallDatas = DataRouter.getIntegralMallDatas();
        let achItems: SelectItemMap[] = Configer.getUIConfig(UIConfigKey.integralMallGuiItemMaps);
        const disableBlp = Configer.getResource(ResourceKey.disableBlp);
        const iconSize = { h: 0.05810, w: 0.04375 }
        const onePageNum = 30;

        return <PageContent type={this.props.pageContentType} desText={`积分: ${this.state.integral}`} closeFun={this.close} hidden={!this.state.visible}   key={GuiKeys.pageContentMall} selectItemMap={achItems} onePageNum={onePageNum} elementsFun={
            (selectKey: number) => {
                let eles = [];
                eles.push( ...integralMallDatas.map(
                    (integralMallData, index, array) => {
                        const type = integralMallData?.type;
                        if (type === selectKey && integralMallData && integralMallData.id?.length > 0) {
                            // const appId = integralMallData.id;
                            const achId = integralMallData.ach;
                            const achData = DataRouter.getAchievementDataByAchievementId(achId);
                            const iconPath = achData?.iconPath;
                            const resourceData = DataRouter.getResourceDataByResourceId(iconPath);
                            const backgroundImage = resourceData?.src;
                            let mask = disableBlp;
                            let achNum = 0;
                            if (this.state.achs) {
                                achNum = this.state.achs[achId];
                            }
                            if (achNum && achNum > 0) {
                                mask = '';
                            }
                            const integral = integralMallData.integral;
                            const title = achData?.name ? achData.name : '未命名';
                            const subTitle = integral ? `价格：${integral}积分` : '价格：0积分';
                            const des = achData?.descript ? achData.descript : '暂无描述';

                            return <View onMouseDown={ () => { return this.useIntegral(achId, integral) }} onMouseEnter={(event) => { this.showInfoPage(event.x + iconSize.w, event.y, title, subTitle, des) }} onMouseLeave={this.closeInfoPage}   key = {`${GuiKeys.integralMallItem}|${index}`} style={{ mask, backgroundImage: backgroundImage, width: iconSize.w, height: iconSize.h, marginT: 0.01328, marginL: 0.01000 }}></View>
                        }
                        return <View   key = {`${GuiKeys.integralMallItem}|${index}`} style={{ hidden: true }}></View>
                    }
                ))
                return eles;
            }
        }>
        </PageContent>
    }

    showInfoPage = (x: number, y: number, title: string, subTitle: string, des: string) => {
        publicGui.showInfoPage(x, y, title, subTitle, des);
    }

    useIntegral = (achId: string, integral: number) => {
        const syncData: UISyncData = { id: SyncId.useIntegral, param: { achId: achId, integral: integral } };
        return syncData
    }

    closeInfoPage = () => {
        publicGui.closeInfoPage();
    }

    close = () => {
        const syncData: UISyncData = { id: SyncId.closeUI, param: { guiId: GuiId.integralMallBar } };
        return syncData;
    }

    closeBar = () => {
        this.setState({
            ...this.state,
            visible: false,
        })
    }
    openBar = () => {
        const achs = this.props.getAchFun(PlayerFactory.getInstance().getLocalPlayer());
        const integral = this.props.getIntegralFun(PlayerFactory.getInstance().getLocalPlayer());
        this.setState({
            ...this.state,
            visible: true,
            integral: integral,
            achs,
        })
    }

    getVisible = () => {
        return this.state.visible;
    }
}